<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <div style="border:1px dotted #0d47a1" class="pa-2">
    <span class="subheading">描述</span>
    <v-btn color="info" style="width: 20px" @click="data.push({name:'',sub:[]})">添加</v-btn>
    <v-expansion-panel>
      <v-expansion-panel-content v-for="(item,index) in data" v-bind:key="index">
        <template v-slot:header>
          <v-text-field :rules="rule" v-model="data[index].name" required></v-text-field>
          <v-btn color="warning" style="width: 20px" @click="deleteTop(index)">删除</v-btn>
        </template>
        <div v-for="(subItem,subIndex) in item.sub" v-bind:key="subIndex" class="v-expansion-panel__header ml-5">
          <v-textarea :rules="rule" v-model="data[index].sub[subIndex]" auto-grow :rows="1"></v-textarea>
          <v-btn color="warning" style="width: 20px" @click="deleteSub(index,subIndex)">删除</v-btn>
        </div>
        <v-btn color="info" @click="data[index].sub.push('')">添加</v-btn>
      </v-expansion-panel-content>
    </v-expansion-panel>
  </div>
</template>

<script>
export default {
  name: 'Description',
  model: {
    prop: 'description',
    event: 'cc'
  },
  data: () => ({
    description: '',
    data: [],
    valid: false,
    rule: [v => !!v || '不能为空', v => (v && v.indexOf(';') === -1) || '不能出现分号']
  }),
  methods: {
    stopPropagation (e) {
      e = e || window.event
      if (e.stopPropagation) {
        e.stopPropagation()
      } else {
        e.cancelBubble = true
      }
    },
    deleteTop (index) {
      this.stopPropagation()
      this.data.splice(index, 1)
    },
    deleteSub (index, subIndex) {
      this.stopPropagation()
      this.data[index].sub.splice(subIndex, 1)
    },
    get (data) {
      this.data = []
      let step = data.split(';;;')
      for (let i = 0; i < step.length; i++) {
        let steps = step[i].split(';;')
        let name = steps[0]
        let sub = []
        for (let j = 1; j < steps.length; j++) {
          sub.push(steps[j])
        }
        this.data.push({
          name: name,
          sub: sub
        })
      }
    }
  },
  watch: {
    data: {
      handler (val) {
        this.description = ''
        for (let i = 0; i < val.length; i++) {
          this.description += val[i].name + ';;'
          if (val[i].name.length === 0 || val[i].name.indexOf(';') !== -1) {
            this.valid = false
            this.description = ''
            return
          }
          for (let j = 0; j < val[i].sub.length; j++) {
            this.description += val[i].sub[j] + ';;'
            if (val[i].sub[j].length === 0 || val[i].sub[j].indexOf(';') !== -1) {
              this.valid = false
              this.description = ''
              return
            }
          }
          this.description = this.description.substring(0, this.description.length - 2)
          this.description += ';;;'
        }
        this.description = this.description.substring(0, this.description.length - 3)
        this.valid = true
        console.log(this.description)
      },
      deep: true
    },
    description: {
      handler (val) {
        this.$emit('cc', val)
      }
    }
  }
}
</script>

<style scoped>
@import "../../style/expansion.css";
</style>
